<template>
  <div class="m-content">
    <!--    <div class="m-content-search">-->
    <!--      <Select placeholder="请选择商品类别筛选数据" :filterable="true" :clearable="true" @on-change="changeType">-->
    <!--        <Option v-for="item in typeList" :key="item.typeCode" :value="item.id">-->
    <!--          {{ item.typeName }}-->
    <!--        </Option>-->
    <!--      </Select>-->
    <!--    </div>-->
    <div class="m-content-table">
      <Table :columns="columns" :data="toStockData" :loading="loading"></Table>
    </div>
    <div class="m-content-page" style="white-space: pre-line">
      <Page
          :page-size="pageSize"
          :page-size-opts="[5, 10, 15]"
          :show-sizer="true"
          :total="toStockLen"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
      ></Page>
    </div>
    <div class="m-content-Button">
      <Button type="primary" @click="addToStock">新增</Button>
    </div>

    <AddToStock :showModal="addModal" :typeList="typeList" @closeModal="showAdd = false"
                @reloadTable="reload"></AddToStock>

    <LookToStock :showModal="lookModal" :toStockId="row" :typeList="typeList" @closeModal="showLook = false"
                 @reloadTable="reload"></LookToStock>
    <!--    显示放大图片的组件-->
    <BigImg :url="bigImgUrl" :visible="photoVisible" @closeClick="()=>{photoVisible=false}"></BigImg>

  </div>
</template>

<script>
import {mapActions} from "vuex";
import AddToStock from './handle/addToStock.vue'
import LookToStock from './handle/lookToStock.vue'
import {columns} from './js/columns'
import BigImg from "../Utils/bigImg.vue";

export default {
  // name: "ToStock",
  inject: ['reload'],
  components: {
    BigImg,
    AddToStock,
    LookToStock
  },
  data() {
    return {
      photoVisible: false,
      bigImgUrl: "",
      toStockData: [],   // 商品单位数据
      toStockLen: 0,   // 总数据长度
      loading: false,   // 表格是否在加载中
      page: 0,   // 传递给Modal的page
      pageSize: 5,    // 页面长度
      columns: columns(this),
      showAdd: false,   // 新增商品单位
      showLook: false,   // 修改商品单位
      row: '',   // 选中的商品单位数据
      typeList: [],  // 商品种类数据
    }
  },
  computed: {
    addModal() {
      return this.showAdd
    },
    lookModal() {
      return this.showLook
    }
  },
  mounted() {
    this._getToStock()
    // this._getTypeList()
  },
  methods: {
    showBigImage(e) {//点击图片函数，点击后，把photoVisible设置成true
      if (e != "") {
        this.photoVisible = true;
        this.bigImgUrl = e.row.toStockImgUrls;
      }
    },
    // 编辑商品单位
    look(row) {
      this.row = row.id + ''
      this.showLook = true
    },
    // 删除商品单位
    deleteToStock(id) {
      this._deleteToStock(id)
      this.reload()
    },
    // 新增商品单位
    addToStock() {
      this.showAdd = true
    },
    // 切换页面
    changePage(page) {
      this._getToStock(page - 1, this.pageSize)
    },
    // 修改每页页数
    changePageSize(pageSize) {
      this.pageSize = pageSize
      this._getToStock(0, pageSize)
    },
    // 筛选商品类别数据
    changeType(typeId) {
      this._getToStock(0, this.pageSize, typeId)
    },
    // 修改商品是否上架
    // async _changeToStockShelves(id) {
    //   const url = '/changetoStockshelves'
    //   const res = await this.GET_DATA({
    //     dataUrl: url,
    //     id: id
    //   })
    //   if (res) {
    //     res.code === '0000' && this.$Message.success('操作成功')
    //     this.reload()
    //   }
    // },
    // 获取商品类别数据
    // async _getTypeList() {
    //   const url = '/toStockType/list'
    //   const res = await this.GET_DATA({
    //     dataUrl: url,
    //     s_typeLevel: 2
    //   })
    //   if (res) {
    //     this.$nextTick(() => {
    //       this.typeList = res.data
    //     })
    //   }
    // },
    // 获取商品单位数据
    async _getToStock(page, pageSize, typeId) {
      this.loading = true
      const url = '/toStock/list'
      let pageTemp = page || 0
      let pageSizeTemp = pageSize || 5
      let typeIdTemp = typeId
      let obj = {
        dataUrl: url,
        size: pageSizeTemp,
        page: pageTemp,
      };
      if (typeIdTemp != null) {
        obj.s_typeId = typeIdTemp
      }
      const res = await this.GET_DATA(obj);
      if (res) {
        this.$nextTick(() => {
          this.toStockData = res.data
          this.toStockLen = res.pageable.totalElements
          this.loading = false
        })
      }
    },
    // 删除商品单位接口
    async _deleteToStock(id) {
      this.loading = true
      const url = '/toStock/delete'
      const res = await this.GET_DATA({
        dataUrl: url,
        id: id,
      })
      if (res) {
        res.code === '0000' && this.$successMessage("操作成功")
        this.loading = false
      }
    },
    ...mapActions({
      GET_DATA: '_GET_DATA'
    }),
  }

}
</script>


<style lang="scss">
.m-content-search {
  width: 250px;
  margin-left: 20px;
  margin-bottom: 5px;
}

.m-content-table {
  margin-left: 20px;
  border: 1px solid #dcdee2;
}

.m-content-page {
  position: absolute;
  right: 0;
  margin-top: 10px;
}

.m-content-Button {
  margin-top: 15px;
  margin-left: 20px;
}

//.status-unpaid {
//  color: red;
//}
//
//.status-paid {
//  color: green;
//}
</style>